<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      width="80%"
      align-center
      :show-close="false"
      :before-close="handleClose"
      draggable
    >
      <template #header="{ close }">
        <div class="dialog-header flex justify-between items-center">
          <div>项目新增</div>
          <el-icon class="el-icon--left cursor-pointer" @click="close"
            ><CircleCloseFilled color="#fff"
          /></el-icon>
        </div>
      </template>
      <!-- 步骤条 -->
      <div class="pt-[30px] pb-[20px] bg-white">
        <el-steps :active="activeStep" align-center>
          <el-step title="1.立项信息" />
          <el-step title="2.项目成员" />
          <el-step title="3.校内课题" />
          <el-step title="4.合作单位" />
          <el-step title="5.项目预算" />
          <el-step title="6.项目文档" />
          <el-step title="7.完成登记" />
        </el-steps>
      </div>

      
      <Form v-if="activeStep == 0" />

      <!-- 7.完成登记 -->
      <div class="bg-white mt-[30px]" v-if="activeStep == 6">
        <el-result
          icon="success"
          title="信息登记完成！"
          sub-title="信息已暂存，您可以直接审核通过。"
        >
        </el-result>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <div class="operate-btns">
            <el-button type="primary" v-if="activeStep != 0" @click="toPrevStep"
              >上一步</el-button
            >
            <el-button type="primary" @click="toNextStep" v-if="activeStep != 6"
              >下一步</el-button
            >
            <el-button
              type="primary"
              v-if="activeStep > 1 && activeStep < 6"
              @click="jumpNextStep"
              >跳过</el-button
            >
            <el-button type="primary" v-if="activeStep == 6"
              >审核通过</el-button
            >
            <el-button type="primary" @click="dialogVisible = false"
              >关闭</el-button
            >
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import Form from "./Form.vue";
const dialogVisible = defineModel();
const activeStep = ref(0);
//点击上一步
const toPrevStep = () => {
  activeStep.value--;
};
//点击下一步
const toNextStep = () => {
  activeStep.value++;
};
//点击跳过
const jumpNextStep = () => {
  activeStep.value++;
};
</script>

<style scoped lang="scss">
@import url("@/views/project/index.scss");
</style>
